<template>
  <view class="normal-login-container">
    <view class="logo-content align-center justify-center flex">
      <image
          style="width: 300rpx; height: 150rpx"
          :src="globalConfig.appInfo.logo"
          mode="widthFix"
      >
      </image>

      <view class="login-form-content">
        <view class="action-btn" v-if="!showCode">
          <u-input
              placeholder="请输入手机号"
              border="bottom"
              :value="loginForm.phoneNumber"
              type="number"
              :maxlength="11"
              @input="handlePhoneChange"
          >
            <u-text
                text="+86"
                slot="prefix"
                margin="0 3px 0 0"
                type="tips"
            ></u-text>
            <template slot="suffix">
              <u-icon name="close-circle" @click="handlePhoneClear"></u-icon>
            </template>
          </u-input>
          <view class="btn">
            <u-button
                type="primary"
                shape="circle"
                :text="text"
                color="#e43d33"
                :disabled="disabled"
                @click="handleNext"
            ></u-button>
          </view>
        </view>
        <view class="action-btn" v-else>
          <u-code-input
              v-model="loginForm.code"
              mode="line"
              color="#e43d33"
              borderColor="rgb(228, 61, 51)"
              @finish="handleFinish"
          ></u-code-input>
          <view class="btn">
            <u-button
                type="primary"
                shape="circle"
                :text="text"
                color="#e43d33"
                :disabled="disabled"
                @click="handleSendCode(text)"
            ></u-button>
          </view>
        </view>
      </view>
      <view class="xieyi text-center">
        <view class="radio" v-if="!radiovalue" @click="changeState"></view>
        <view class="radio-checked" v-else @click="changeState">
          <u-icon name="checkbox-mark" color="#fff" size="10px"></u-icon>
        </view>
        <text class="text-grey1"> 登录即代表同意</text>
        <text @click="handleUserAgreement" class="text-red">《用户协议》</text>
        <text @click="handlePrivacy" class="text-red">《隐私协议》</text>
      </view>
      <u-modal :show="showModal"  :content='content' @confirm="confirmModal"></u-modal>
    </view>

    <view class="other-login">
      <text class="text-grey1">————其他登录方式————</text>
      <view class="icon-container">
        <u-icon size="40" name="weixin-fill" color="#04BE02" @click="toLogin"></u-icon>
      </view>

    </view>
  </view>
</template>

<script>
import {isPhoneNumber} from "@/utils/verify";
import {isEmptyString} from "@/utils/common";

export default {
  data() {
    return {
      codeUrl: "",
      codeWechart: "", //微信code
      captchaEnabled: true,
      globalConfig: getApp().globalData.config,
      loginForm: {
        phoneNumber: "",
        code: "",
      },
      disabled: true,
      avatarUrl: "", //微信头像
      name: "", //微信昵称
      showCode: false,
      text: "下一步",
      timer: null, //定时器
      inviteId: "", //邀请链接
      radiovalue: false,
      showModal: false,
      content: "请先同意《用户协议》和《隐私协议》",
    };
  },
  onLoad(options) {
  },
  created() {
  },
  onShow() {
    //让背景图片动起来
  },
  methods: {
    // 隐私协议
    handlePrivacy() {
      let site = this.globalConfig.appInfo.agreements[0];
      this.$tab.navigateTo(
          `/pages/common/webview/index?title=${site.title}&url=${site.url}`
      );
    },
    // 用户协议
    handleUserAgrement() {
      let site = this.globalConfig.appInfo.agreements[1];
      this.$tab.navigateTo(
          `/pages/common/webview/index?title=${site.title}&url=${site.url}`
      );
    },
    // 登录方法
    async handleLogin() {
      if (!this.radiovalue) {
        this.showModal = true;
        return;
      }
      this.$modal.loading("登录中，请耐心等待...");
      console.log(this.loginForm);
      this.$store
          .dispatch("SmsLogin", this.loginForm)
          .then(() => {
            this.$modal.closeLoading();
            this.loginSuccess();
          })
          .catch(() => {
            console.log("登录失败");
            if (this.captchaEnabled) {
              console.log("登录失败");
              this.showCode = false;
            }
          });
    },
    // 密码登录
    async pwdLogin() {
      this.$store
          .dispatch("Login", this.loginForm)
          .then(() => {
            this.$modal.closeLoading();
            this.loginSuccess();
          })
          .catch(() => {
            if (this.captchaEnabled) {
              this.getCode();
            }
          });
    },
    // 登录成功后，处理函数
    loginSuccess(result) {
      // 设置用户信息
      this.$store.dispatch("GetInfo").then((res) => {
        this.$tab.reLaunch("/pages/index");
      });
    },
    //手机号验证码
    handlePhoneChange(e) {
      this.loginForm.phoneNumber = e;
      if (this.loginForm.phoneNumber.length == 11) {
        if (isPhoneNumber(this.loginForm.phoneNumber)) {
          this.disabled = false;
        } else {
          this.disabled = true;
          uni.showToast({
            title: "请输入正确的手机号",
            icon: "none",
          });
        }
      } else {
        this.disabled = true;
      }
    },
    //清楚手机号
    handlePhoneClear() {
      this.loginForm.phoneNumber = "";
      this.disabled = true;
    },
    //下一步
    handleNext() {
      this.showCode = true;
      this.text = "获取验证码";
      this.loginForm.code = "";
    },
    //获取验证码
    handleSendCode(type) {
      if (type == "登录") {
        this.handleLogin();
      } else {
        this.$store
            .dispatch("SendCode", {
              phone: this.loginForm.phoneNumber,
            })
            .then((res) => {
              this.disabled = true;
              //倒计时60s
              let time = 60;
              this.timer = setInterval(() => {
                time--;
                this.text = time + "s";
                if (time == 0) {
                  clearInterval(this.timer);
                  this.text = "重新获取";
                  this.disabled = false;
                } else {
                  this.text = time + "s后重新发送";
                }
              }, 1000);
            });
      }
    },
    //验证码输入完毕
    handleFinish(e) {
      this.loginForm.code = e;
      //清楚定时器
      this.disabled = false;
      clearInterval(this.timer);
      this.text = "登录";
    },
    toLogin() {
      uni.reLaunch({
        url: '/pages/login'
      })
    },
    //勾选协议
    changeState() {
      this.radiovalue = !this.radiovalue;
    },
    confirmModal() {
      this.showModal = false;
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #ffffff;
}

.normal-login-container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  background: url(../static/images/login/建筑.png) no-repeat center bottom;
  background-size: contain;
  background-position-x: -10%;

  .logo-content {
    width: 100%;
    font-size: 21px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;

    image {
      border-radius: 4px;
    }

    .title {
      margin-top: 10px;
      margin-left: 10px;
      font-size: 1.3rem;
    }
  }

  .login-form-content {
    text-align: center;
    margin: 20px auto;
    margin-bottom: 0px;
    width: 80%;

    .input-item {
      margin: 20px auto;
      background-color: #f5f6f7;
      height: 45px;
      border-radius: 10px;

      .icon {
        font-size: 2rem;
        margin-left: 10px;
        color: #999;
      }

      .input {
        width: 100%;
        font-size: 14px;
        line-height: 20px;
        text-align: left;
        padding-left: 15px;
      }
    }

    .login-btn {
      margin-top: 40px;
      height: 45px;
      border-radius: 10px;
      background-color: $uni-color-button;
    }

    .btn {
      margin-top: 1rem;
    }
  }

  .easyinput {
    width: 100%;
  }
}

.login-code-img {
  height: 45px;
}

.other-login {
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .margin10 {
    margin-top: 20%;
  }
}

.xieyi {
  color: #333;
  margin-top: 20px;
  font-size: 0.7rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.login-img {
  width: 3rem;
  height: 3rem;
  margin-top: 0.5rem;
}
.radio {
  width: 30rpx;
  height: 30rpx;
  border-radius: 50%;
  border: 1px solid #999;
  margin-right: 10rpx;
}
.radio-checked {
  width: 30rpx;
  height: 30rpx;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #e43d33;
  margin-right: 10rpx;
}
</style>
  